<template>
	<!-- 这是主页的内容 -->
	<view class="top">
		<!-- 头像部分 -->
		<view class="tx">
			<!-- 头像 -->
			<image src="../../static/tx.jpg" />
			<view>{{name}}欢迎您~</view>
			<!-- 核销的两个框 -->
			<view class="hexiao">
				<view class="QR" @click="saoma()">扫码核销</view>
				<view class="inputNum" @click="inpoutHe()">输入核销码</view>
			</view>
		</view>
		<view class="center">
			<view v-for="(value,key,index) in centerData2" :key="index" @click="centerClick(key)">
				<image :src="value"></image>
				<view>{{key}}</view>
			</view>
		</view>
		<view class="dataBottom">
			<view>
				<view>
					<image src="../../static/homepage/消息-信息@3x.png"></image>
					<text>最新通知</text>
					<text>今日需上门取车任务共{{count}}单</text>
				</view>
			</view>
			<view>
				<!-- 表单表头 -->
				<view>
					<text>用户</text>
					<text>服务项目</text>
					<text>时间</text>
				</view>
				<!-- 内容 -->
				<view v-for="(item,index) in tongData" class="dataLst">
					<text>{{item.name}}</text>
					<text>{{item.serviceProject}}</text>
					<text>{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "万通汽修",
				centerData2: {
					"经营统计": "../../static/homepage/统计@3x.png",
					"核销记录": "../../static/homepage/核销记录 (1)@3x.png",
					"收支明细": "../../static/homepage/123收支明细@3x.png",
					"订单管理": "../../static/homepage/订单管理@3x.png",
					"卡卷管理": "../../static/homepage/卡券@3x.png",
					"维修任务": "../../static/homepage/维修@3x.png",
					"评价管理": "../../static/homepage/评价管理@3x.png",
					"客户资料": "../../static/homepage/资料库@3x.png",
					"活动发布": "../../static/homepage/活动@3x.png"
				},
				count: 25,
				tongData: [{
						name: "张三",
						serviceProject: "汽车精洗",
						time: "2020-10-10 11:09"
					},
					{
						name: "李四",
						serviceProject: "汽车美容",
						time: "2020-10-10 11:09"
					},
					{
						name: "王五",
						serviceProject: "汽车维修",
						time: "2020-10-10 11:09"
					},
					{
						name: "张三",
						serviceProject: "汽车精洗",
						time: "2020-10-10 11:09"
					},
					{
						name: "张三",
						serviceProject: "汽车精洗",
						time: "2020-10-10 11:09"
					}

				]

			}
		},
		methods: {
			saoma() {
				uni.navigateTo({
					url: "/pages/write_off/write_off"
				})
			},
			inpoutHe() {
				uni.navigateTo({
					url: "/pages/write_off/input_writeoff/input_writeoff"
				})
			},
			centerClick(value) {
				console.log(value);
				if(value==='经营统计'){
					uni.navigateTo({
						url:"/pages/operate_count/operate_count"
					})
				}
			}
		}
	}
</script>

<style>
	.top {
		position: relative;
	}

	.tx {
		height: 300rpx;
		width: 100%;
		background-color: dodgerblue;
		/* 		border: 2px solid red; */
		position: relative;
		margin-bottom: 40rpx;
	}

	.tx image {
		/* 		border: 2px solid red; */
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		margin: 50px;
	}

	.tx>view {
		color: white;
		position: absolute;
		top: 100rpx;
		left: 220rpx;
	}

	.center {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.center>view {
		margin: 20rpx;
		width: 200rpx;
		height: 200rpx;
		/* 		border: 2px solid red; */

	}

	.center image {
		margin-top: 10rpx;
		width: 100rpx;
		height: 100rpx;
		/* margin: 10rpx 0; */
		padding: 10rpx;
	}



	.dataBottom image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.dataBottom>view:first-child>view:first-child {
		/* color: red; */
		margin: 20rpx 60rpx 20rpx;
	}

	.dataBottom>view:first-child>view:first-child>text:first-of-type {
		font-size: 30rpx;
		font-weight: 600;
		padding-bottom: 20rpx;
	}

	.dataBottom>view:first-child>view:first-child>text:last-of-type {
		margin-left: 100rpx;
		color: red;
	}

	.dataBottom>view:nth-child(2)>view:first-of-type {
		text-align: center;
		background-color: gainsboro;
	}

	.dataBottom>view:nth-child(2)>view:first-of-type>text:first-of-type {
		margin-left: 80rpx;

	}

	.dataBottom>view:nth-child(2)>view:first-of-type>text:last-child {
		margin-right: 110rpx;
	}

	.dataBottom>view:nth-child(2)>view:first-of-type>text {
		margin-right: 150rpx;
	}

	.dataLst {
		margin-left: 100rpx;
		font-size: 10rpx;
	}

	.dataLst>text:first-of-type {
		margin-right: 140rpx;
	}

	.dataLst>text:last-child {
		margin-left: 100rpx;
	}

	.QR {
		width: 280rpx;
		height: 100rpx;
		background-color: white;
		border-radius: 20rpx;
		position: relative;
		top: 150rpx;
		left: -160rpx;
		color: black;
		text-align: center;
		/* margin: 20rpx auto; */
		/* padding-top: 20rpx; */
		line-height: 100rpx;
		box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
	}

	.inputNum {
		width: 280rpx;
		height: 100rpx;
		background-color: white;
		border-radius: 20rpx;
		position: relative;
		top: 50rpx;
		left: 160rpx;
		color: black;
		text-align: center;
		line-height: 100rpx;
		box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
	}
</style>